<template>
  <div class='macro-info'>
    <div class="naviga">&nbsp;&nbsp;&nbsp;&nbsp;{{$store.state.marketName}}&nbsp;>&nbsp;市场宏观趋势&nbsp;>&nbsp;机会威胁分析</div>
    <div class='macro-info-con'>
      <div class='border-card clearfix'>
        <span  v-for="(item,index) in fieldData" @click="getPolicy(item)">{{item}}</span>
      </div>
      <div class='info-con' style="width: 100%">
        <div>
          <p>机会威胁&nbsp;&rsaquo;</p>
          <p class="router">
            <ul>
               <router-link
               class='go-router'
               :to="{path:'/full/marketMenu/targetMarketTrends/opportunityDetails/macroInfo/trendAnalysis'}"
            >
              趋势分析&nbsp;&nbsp;&rsaquo;
            </router-link>
            </ul>
          </p>
         <p class='go-back' @click="$router.go(-1)">&lsaquo;&nbsp;&nbsp;返回上一步</p>




        </div>
        <div class="lable col-xs-12" style="margin-top: 20px;padding:0;">
          <p class="col-xs-2 botton1"
               @click="queryAnalysisDetail(item,index)"
               v-for="(item,index) in policyData">
                <el-tooltip effect="dark"  :content="item" placement="top-start">
                  <span class="query">{{item}}</span>
                </el-tooltip>
          </p>
        </div>
        <!---->
        <div>
          <!--左侧-->
          <div class="active">
            <div class="cont leftCont"
              @click="getRightEconomic(item)"
              v-for="(item,index) in AnalysisDetail">
              <el-tooltip  effect="dark"  :content="item.content" placement="top-start">
                <li class="left-dack"><span style='padding-left:10px'>{{index+1}}.</span><p>{{item.content}}</p></li>
              </el-tooltip>
            </div>
          </div>
          <!--右侧-->
          <div class="active" v-if="showshow">
            <li
              v-for="(item,index) in economicData"
              class="clearfix col-xs-12 rightCont"

              style="padding: 0" >
              <div class="col-xs-1" style="margin-top: 34px">
                <p class="img-box jihui" v-if="item.opportunityType==='机会'"  />
                <p class="img-box weixie" v-else-if="item.opportunityType==='威胁'"  />
                <p v-else  class="img-box no"></p>
              </div>
              <p class="col-xs-9" >
                <span>{{item.articles}}</span>
                <span>{{item.content}}</span>
              </p>
              <p class="col-xs-2" style="text-align: right">
                <span class="editing" @click="centerDialogVisible = true;economic(item)">作用分析</span>
              </p>
            </li>
          </div>
        </div>
      </div>
    </div>
    <!--弹框分析编辑start-->
    <div class="pop-up">
      <el-dialog
        title="分析编辑"
        :visible.sync="centerDialogVisible"
        width="60%"

        center>
        <div class="pop-cont ">
          <ul>
            <p>{{alertData.otherTrends}}&nbsp;>&nbsp;{{alertData.otherAnalysis}}</p>
            <p style="word-break:break-all">{{alertData.otherContent}}</p>
          </ul>
          <ul>
            <p>经济&nbsp;>&nbsp;{{alertData.economic}}</p>
            <p style="word-break:break-all">{{alertData.ecocontent}}</p>
          </ul>
          <div class="analysis-result clearfix col-xs-12" style="padding: 0;">
            <span class="col-xs-1" style="padding: 0;line-height: 60px">分析结果</span>
            <ul class="col-xs-11">
              <el-input
                maxlength=160
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                style="height: 120px"
                v-model="textarea1">
              </el-input>
            </ul>
          </div>
            <div class='ck col-xs-12' style="padding: 0 0 50px 0;position:relative">
            <span class="col-xs-1" style="padding: 0;line-height: 60px"></span>
            <!-- <div style="position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;" v-if="econData.opportunityType"></div> -->
            <!-- <el-checkbox-group  :disabled="econData.opportunityType? true:false" v-model="jWCheckList" :max=1 style="position:relative;z-index:0;">
              <el-checkbox
                v-for="item in jWArr"
                :label="item"
                @click.native="checJWBox(item)"
                :key="item.id">
                {{item}}
              </el-checkbox>
            </el-checkbox-group> -->
            <el-checkbox-group   v-model="jWCheckList" :max=1 style="position:relative;z-index:0;">
              <el-checkbox
                v-for="item in jWArr"
                :label="item"
                @click.native="checJWBox(item)"
                :key="item.id">
                {{item}}
              </el-checkbox>
            </el-checkbox-group>

          </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false;addAnasisEditor()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!--弹框分析编辑end-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      textarea1: "",
      checked: true,
      fieldData: "",
      trends: "",
      policyData: "",
      AnalysisDetail: "",
      economicData: "",
      right: "",
      left: "",
      allData1: {},
      econData: {},
      jWArr: ["机会", "威胁"],
      jWCheckList: [],
      marketId: "",
      alertData: {
        otherTrends: "",
        otherAnalysis: "",
        otherContent: "",
        economic: "",
        ecocontent: "",
        opporType: ""
      },
      aId: "",
      showshow:false,
    };
  },
  mounted() {
    this.marketId = this.$store.state.id;
    let id = this.marketId;
    this.getField(id);
  },
  methods: {
    // handleClose(done) {
    //   this.$confirm('确认关闭？')
    //     .then(_ => {
    //       done();
    //     })
    //     .catch(_ => {});
    // }
    //获取政治/技术接口
    getField(id) {
      this.$http
        .post(
          this.GLOBAL.host,
          {
            method: "getDictionary",
            query: {
              cnName: "市场罗盘_宏观趋势"
            }
          }
          // {
          //   method: "getFieldOfOpportunityThreat",
          //   query: {
          //     marketId: id, //this.marketId
          //     opportunityType: "机会",
          //     field: "trend"
          //   }
          // }
        )
        .then(res => {
          let data = res.data.data.dictionary;
          let arr = [];
          for (let i in data) {
            arr.push(data[i].entry);
          }
          let fieldArr = [];
          for (let i = 0; i < arr.length; i++) {
            if (arr[i] != "经济") {
              fieldArr.push(arr[i]);
            }
          }
          this.fieldData = fieldArr;
          this.$nextTick(function() {
            $(".border-card span")
              .eq(0)
              .addClass("active2");
            $(".border-card span").on("click", function() {
              $(this)
                .addClass("active2")
                .siblings()
                .removeClass("active2");
            });
          });
          if (fieldArr.length != 0) {
            console.log(fieldArr);
            this.getPo(fieldArr[0]);
          }
        })
        .catch(error => {});
    },
    //获取政策
    getPolicy(val) {
      console.log(val);
      let trend = val;
      this.trends = trend;
      //   let marketId=this.$route.query.id
      this.getPo(val);
    },
    //
    getPo(val) {
      this.trends = val;
      this.alertData.otherTrends = val;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getFieldOfOpportunityThreat",
          query: {
            marketId: this.marketId, //marketId
            opportunityType: "机会",
            trend: val,
            field: "articles"
          }
        })
        .then(res => {
          if (res.data.code != 200) {
            this.policyData = [];
          } else {
            this.policyData = res.data.data;
            if (this.policyData.length != 0) {
              console.log(res.data.data[0]);

              this.getAnalysis(res.data.data[0]);
            }
            this.$nextTick(function() {
              $(".botton1")
                .eq(0)
                .addClass("active3")
                .siblings()
                .removeClass("active3");
            });
          }
        })
        .catch(error => {});
    },
    //获取右侧经济

    getRightEconomic(item) {
      this.alertData.otherContent = item.content;
      this.allData1 = item;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOTByCondition",
          query: {
            marketId: this.marketId,
            id: item.id,
            trend: "经济",
            pageSize: 100,
            pageNo: 1
          }
        })
        .then(res => {
          if (res.data.code != 200) {
            this.economicData = [];
          } else {
            let econ = res.data.data.list;

            this.economicData = econ;

            let _this = this;
            this.$nextTick(function() {
              // $(".rightCont")
              //   .eq(0)
              //   .addClass("active4")
              //   .siblings()
              //   .removeClass("active4");
              $(".rightCont").removeClass("active4");
              $(".rightCont").on("click", function() {
                for (let i = 0; i < res.data.data.list.length; i++) {
                  if (i == $(this).index()) {
                    _this.right = res.data.data.list[i].content;
                  }
                }
                $(this)
                  .addClass("active4")
                  .siblings()
                  .removeClass("active4");
              });
            });
          }
        })
        .catch(error => {});
    },
    //点击每条经济，获取作用分析弹框内容
    economic(item) {
      this.alertData.economic = item.articles;
      this.alertData.ecocontent = item.content;
      this.alertData.opporType = item.opportunityType;
      this.econData = item;
      // console.log(item.opportunityType);
      if (item.opportunityType != null) {
        //如果是机会和威胁就是获取弹框内容
        this.$http
          .post(this.GLOBAL.host, {
            method: "getOneOpportunityAnalysis",
            query: {
              economyId: item.id,
              otherOpportunityId: this.allData1.id,
              marketId: this.marketId //this.marketId
            }
          })
          .then(res => {
            this.textarea1 = res.data.data.analysisResult;
            this.aId = res.data.data.id;
            this.jWCheckList = [item.opportunityType];
          })
          .catch(error => {});
      } else {
        this.textarea1 = "";
        this.jWCheckList = [];
      }
    },
    //查询市场机会分析集合
    queryAnalysisDetail(val, index) {
       console.log(val);
      $(".botton1")
        .eq(index)
        .addClass("active3")
        .siblings()
        .removeClass("active3");
      // $(".rightCont")
      //   .eq(0)
      //   .addClass("active4")
      //   .siblings()
      //   .removeClass("active4");
      $(".rightCont").removeClass("active4");
      this.getAnalysis(val);
    },
    getAnalysis(val) {
      console.log(val);
      this.alertData.otherAnalysis = val;

      this.$http
        .post(this.GLOBAL.host, {
          method: "getOpportunityThreat",
          query: {
            marketId: this.marketId,
            adopt: 1,
            articles: val,
            trend: this.trends,
            pageSize: 10,
            pageNo: 1
          }
        })
        .then(res => {
          if (res.data.code != 200) {
            this.AnalysisDetail = [];
            this.economicData = [];
          } else {
            this.AnalysisDetail = res.data.data.list;

            let firstId = res.data.data.list[0];
            console.log(this.AnalysisDetail.length)
            if (this.AnalysisDetail.length != 0) {
              this.getRightEconomic(firstId);
              this.showshow=true
            }else{
              this.showshow=false
            }
            let _this = this;
            this.$nextTick(function() {
              $(".leftCont")
                .eq(0)
                .addClass("active1")
                .siblings()
                .removeClass("active1");
              $(".leftCont").on("click", function() {
                for (let i = 0; i < res.data.data.list.length; i++) {
                  console.log($(this).index());
                  if (i == $(this).index()) {
                    _this.left = res.data.data.list[i].content;
                    console.log(this.left);
                  }
                }
                $(this)
                  .addClass("active1")
                  .siblings()
                  .removeClass("active1");
              });
            });
            console.log(this.AnalysisDetail);
          }
        })
        .catch(error => {});
    },
    //新增市场趋势分析
    addAnasisEditor() {
      //如果是修改
      console.log(this.alertData.opporType);
      if (this.alertData.opporType != null) {
        console.log(this.jWCheckList);
        this.$http
          .post(this.GLOBAL.host, {
            method: "updateOpportunityAnalysis",
            data: {
              id: this.aId,
              analysisResult: this.textarea1,
              analysisType: this.jWCheckList[0]
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              //涮新右侧经济列表
              let allData = this.allData1;
              this.getRightEconomic(allData);
            } else {
              this.$message({
                message: "修改失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      } else {
        //新增接口
        this.$http
          .post(this.GLOBAL.host, {
            method: "addOpportunityAnalysis",
            data: {
              economyId: this.econData.id,
              otherOpportunityId: this.allData1.id,
              analysisResult: this.textarea1,
              marketId: this.marketId,
              analysisType: this.jWCheckList[0]
            }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              let allData = this.allData1;
              this.getRightEconomic(allData);
            } else {
              this.$message({
                message: "新增失败",
                type: "error"
              });
            }
          })
          .catch(error => {});
      }
    },
    checJWBox(item) {
      this.jWCheckList = [item];
      console.log(item);
    }
  }
};
</script>
<style lang="less">
.macro-info {
  .left-dack {
    height: 90px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 90px;
      margin-bottom: 0;
      width:90%;
    }
  }
  .query{
    width: 100%;
    display: block;
     white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .go-router {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .go-back {
    cursor: pointer;
    padding: 0;
  }
  .router {
    padding: 0;
  }
  .botton1 {
    font-size: 14px;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    border: 1px solid #cccccc;
  }
  .active1 {
    background: #3aaaec;
    color: #fff;
    border: none;
  }
  li {
    list-style: none;
  }
  .cont {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .active1 {
    background: #d9effc;
    color: #3aaaec;
  }
  .active2 {
    border-top: 2px solid #3aaaec;
    background: #ffffff;
  }
  .active3 {
    color: #fff;
    background: #3aaaec;
    border: none;
  }
  .active4 {
    background: #d9effc;
  }

  .botton1 {
    text-align: center;
    font-size: 14px;
    border: 1px solid #ccc;
    line-height: 40px;
    height: 40px;
    margin-left: 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  /*详细内容页顶部面包屑样式start*/
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  /*详细内容页顶部面包屑样式end*/
  /*宏观信息识别内容star*/
  .macro-info-con {
    width: 100%;
    height: auto;
    background: #f6f6f6;
    > .border-card {
      width: 97.65%;
      margin: auto;
      margin-top: 20px;
      > span {
        display: block;
        width: 6.6%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        float: left;
        cursor: pointer;
      }
    }
    > div {
      background: #f6f6f6;
    }
    .info-con {
      width: 100%;
      height: auto;
      background: #f6f6f6;
      > div:nth-child(1) {
        width: 100%;
        height: 62px;
        background: #ffffff;
        line-height: 66px;
        > p:nth-child(1) {
          float: left;
          margin-left: 20px;
          color: #333333;
        }
        > p:nth-child(2) {
          float: right;
          margin-right: 20px;
          border: 1px solid #39adea;
          background: linear-gradient(to right, #3bc9e2, #08acf2);
          width: 160px;
          height: 47px;
          text-align: center;
          line-height: 47px;
          margin-top: 7px;
          color: #fff;
          border-radius: 5px;
        }
        > p:nth-child(3) {
          float: right;
          margin-right: 20px;
          width: 160px;
          height: 47px;
          text-align: center;
          line-height: 47px;
          margin-top: 7px;
          color: #fff;
          border-radius: 5px;
          background: #acc6d3;
        }
      }
      > div:nth-child(2) {
        margin-top: 20px;
        // margin-bottom: 20px;
        width: 100%;
        .button-group {
          width: 100%;
          .but {
            width: 15.6%;
            margin-right: 1%;
          }
        }
      }
      > div:nth-child(3) {
        width: 100%;
        > div:nth-child(1) {
          width: 30%;
          height: 630px;
          overflow: scroll;
          background: #fff;
          float: left;
          border: 1px solid #e0e0e0;
          > li {
            height: 90px;
            line-height: 90px;
            padding-left: 30px;
            border-bottom: 1px solid #e0e0e0;
          }
        }
        > div:nth-child(2) {
          width: 65%;
          height: 630px;
          overflow: scroll;
          background: #fff;
          float: right;
          border: 1px solid #e0e0e0;
          > li {
            height: 90px;
            border-bottom: 1px solid #e0e0e0;
            > img {
              margin-top: 20px;
            }

            > p:nth-child(2) {
              span {
                display: block;
              }
              > span:nth-child(1) {
                font-size: 20px;
                //color: #686868;
                font-weight: bold;
                margin-top: 20px;
              }
              > span:nth-child(2) {
                font-size: 14px;
                // color: #686868;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            > p:nth-child(3) {
              span {
                display: block;
                line-height: 30px;
              }
              > span:nth-child(1) {
                margin-top: 20px;
              }
            }
            > p:nth-child(4) {
              span {
                display: block;
                font-size: 20px;
                color: #686868;
                margin-top: 20px;
              }
            }
            .opportunity {
              color: #2ba9f6;
            }
            .editing {
              color: #3aaaec;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  /*宏观信息识别内容end*/
  /*分析编辑弹框start*/
  .pop-up {
    border-radius: 20px;
    .el-dialog__header {
      text-align: center;
    }
    .el-dialog__body {
      padding-top: 0;
    }
    .el-dialog {
      border-radius: 10px;
    }
    textarea {
      height: 100%;
    }
    .pop-cont {
      ul {
        padding: 0;
        margin-top: 20px;
        > p:nth-child(1) {
          color: #3aaaec;
        }
      }
    }
    .ck {
      margin-top: 26px;
    }
  }
  /*分析编辑弹框end*/

  .img-box {
    // background-origin: 50% 50%;
    // background-size: cover;
    width: 22px;
    height: 22px;
    //  background-image: url(../../../images/noAnasis.png);
    &.jihui {
      background-image: url(../../../images/jihui.png);
    }
    &.weixie {
      background-image: url(../../../images/weixie.png);
    }
    &.no {
      background-image: url(../../../images/noAnasis.png);
    }
  }
}
</style>
